<template>
	<view class="main" v-if="data">
		<view class="title">
			<view class="top">
				<view class="price" >
					{{data.fee==0?"免费":"¥"+data.fee}}
				</view>
				<view class="nums" v-if="view!='undefined'">
					<image src="../../../static/image/mine.png" mode=""></image>
					<text>{{view}}</text>
				</view>
			</view>
			<view class="titles">
			{{data.shortname}}
			</view>
		</view>
<!-- 		<view class="teacher">
			<view class="title-c">{{ $t('course.teacher') }}</view>
			<view class="bottom">
				<image class="avatar" src="../../../static/image/avator.png" mode=""></image>
				<view class="right">
					<view class="name">
						爱丽勋·李
					</view>
					<view class="introduce">
						连9年微软全球最有价值专家,课堂明星师,全网学员超10000万连9年微软全球最有价值专家,课堂明星师,全网学员超10000万连9年微软全球最有价值专家,课堂明星师,全网学员超10000万
					</view>
				</view>
			</view>
		</view> -->
		<view class="course">
			<view class="title-c">
				{{ $t('course.introduce') }}
			</view>
			<view class="content" v-html="data.summary">
			
			</view>
		</view>
<!-- 		<view class="about">
			<view class="title-c">
				{{ $t("course.about") }}
			</view>
			<view class="list">
				
			<course-list></course-list>
			</view>
		</view> -->
	</view>
</template>

<script>
	import courseList from "../../../components/courseList/courseList.vue"
	export default {
		name: "introduce",
		props:{
			data:{
				type:Object,
				default:()=>{}
			},
			view:{
				type:String,
				default:()=>'0'
			}
		},
		data() {
			return {

			}
		},
		components: {
			courseList
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		background: #F5F6FA;
		width: 100%;
		height: 100%;

		.title {
			width: 100%;
			height: 170rpx;
			background-color: #FFFFFF;
			border-bottom-right-radius: 20rpx;
			border-bottom-left-radius: 20rpx;
			overflow: hidden;

			.top {
				width: 90%;
				margin: 20rpx auto 0;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.price {
					font-size: 44rpx;
					color: #FF464E;
				}

				.nums {
					display: flex;
					justify-content: space-between;
					align-items: center;

					image {
						width: 24rpx;
						height: 24rpx;
					}

					text {
						font-size: 24rpx;
						font-weight: 400;
						color: #6E7580;
					}
				}
			}

			.titles {
				margin: 30rpx auto 0;
				font-size: 32rpx;
				color: #0F1826;
				width: 90%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-weight: 500;
			}
		}

		.title-c {
			margin: 22rpx auto 0;
			font-size: 32rpx;
			color: #0F1826;
			width: 90%;
			height: auto;
			font-weight: 500;
		}

		.teacher {
			margin-top: 20rpx;
			border-radius: 20rpx;
			background-color: #FFFFFF;
			overflow: hidden;
			height: 256rpx;


			.bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 90%;
				margin: 32rpx auto 0;

				.avatar {
					width: 104rpx;
					height: 104rpx;
					margin-right: 20rpx;
				}

				.right {
					flex: 1;

					.name {
						font-weight: 500;
						color: #0F1826;
						font-size: 28rpx;
					}

					.introduce {
						margin-top: 12rpx;
						font-weight: 400;
						color: #6E7580;
						line-height: 36rpx;
						font-size: 24rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}
				}
			}
		}

		.course {
			margin-top: 20rpx;
			border-radius: 20rpx;
			background-color: #FFFFFF;
			overflow: hidden;

			.content {
				width: 90%;
				margin: 32rpx auto;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #6E7580;
				line-height: 36rpx;
			}
		}

		.about {
			margin-top: 20rpx;
			border-radius: 20rpx;
			background-color: #FFFFFF;
			overflow: hidden;
			padding-bottom: 96rpx;
			.list{
				width: 90%;
				margin: 32rpx auto;
				background-color: #FFFFFF;	
			}
		}
	}
</style>
